<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content="Triple Forms Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>


	<!-- css files -->
	<link rel="stylesheet" href="css/style_sign.css" type="text/css" media="all" />
	<link href="css/font-awesome.min.css" rel="stylesheet">
	

	
</head>

<body>
	<div class="main-bg" id="sign">
		<!-- title -->
		<h1></h1>
		<!-- //title -->
		<div class="sub-main-w3">
			<!-- vertical tabs -->
			<div class="vertical-tab" style="margin-left:125px">
				<div id="section1" class="section-w3ls">
					<input type="radio" name="sections" id="option1" checked>
					<label for="option1" class="icon-left-w3pvt"><span class="fa fa-user-circle" aria-hidden="true"></span>登录</label>
					<article>
						<form action="#" method="post">
							<h3 class="legend">登录</h3>
							<div class="input">
								<span class="fa fa-envelope-o" aria-hidden="true"></span>
								<input v-model="email"  placeholder="邮箱" required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span>
								<input v-model="u_passwd" placeholder="密码"  required />
							</div>
							<button @click="sign" class="btn submit">登录</button>
						</form>
					</article>
				</div>
				<div id="section2" class="section-w3ls">
					<input type="radio" name="sections" id="option2">
					<label for="option2" class="icon-left-w3pvt"><span class="fa fa-pencil-square" aria-hidden="true"></span>注册</label>
					<article>
						<form action="#" method="post">
							<h3 class="legend">注册</h3>
							<div class="input">
								<span class="fa fa-envelope-o" aria-hidden="true"></span>
								<input v-model="email"  placeholder="邮箱" required />
							</div>
							<div class="input">
								<span class="fa fa-user-o" aria-hidden="true"></span>
								<input v-model="nickname" placeholder="昵称"  required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span>
								<input v-model="passwd_old" placeholder="密码" required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span>
								<input v-model="passwd_new" placeholder="确认密码 " required />
							</div>
							<button @click="signUp" class="btn submit">注册</button>
						</form>
					</article>
				</div>
				<div id="section3" class="section-w3ls">
					<input type="radio" name="sections" id="option3">
					<label for="option3" class="icon-left-w3pvt"><span class="fa fa-lock" aria-hidden="true"></span>忘记密码</label>
					<article>
						<form action="#" method="post">
							<h3 class="legend last">重置密码</h3>
							<div class="input">
								<span class="fa fa-envelope-o" aria-hidden="true"></span>
								<input v-model="email" placeholder="邮箱" required />
								<button @click="getCode" style="margin-left:-30px;width:90px">获取验证码</button>
							</div>
							<div class="input">
								<span class="fa fa-check" aria-hidden="true"></span>
								<input v-model="checkText" placeholder="验证码" required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span>
								<input v-model="passwd_old" placeholder="密码" required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span>
								<input v-model="passwd_new" placeholder="确认密码 " required />
							</div>
							<button @click="set" class="btn submit last-btn">重置</button>
						</form>
					</article>
				</div>
			</div>
			
			<div class="clear"></div>
		</div>
		
	</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
	var vue=new Vue({
		el:'#sign',
		data:{
			email:"",
			u_passwd:"",
			nickname:"",
			passwd_old:"",
			passwd_new:"",
			checkText:""
		},
		methods:{
			sign:function(){
				$.ajax({
					url:"http://27x31799n7.zicp.vip/login?",
					type:"POST",
					data:{
						email:this.email,
						u_passwd:this.u_passwd
					},
					dataType:"json",
					success:function(data){
						if(data.code=="200"){
							alert("登录成功");
							window.location.href='index.jsp?email='+this.email+'nickname='+data.nickname;
						}else if(data.code=="400"){
							alert("密码错误，请重新登录或找回密码");
							window.location.href='sign.jsp';
						}
					}
				})
			},
			signUp:function(){
				if(passwd_old!=passwd_new){
					alert("两次密码不一致");
				}else{
					$.ajax({
						url:"http://27x31799n7.zicp.vip/register?",
						type:"POST",
						data:{
							email:this.email,
							u_passwd:this.new_passwd,
						},
						dataType:"json",
						success:function(data){
							if(data.code=="200"){
								alert("登录成功");
								window.location.href='index.jsp?email='+this.email+'nickname='+data.nickname;
							}else if(data.code=="400"){
								alert("用户已存在，请直接登录");
								window.location.href='sign.jsp';
							}
						}
					})
				}
			},
			getCode:function(){
				$.ajax({
					url:"http://27x31799n7.zicp.vip/getVerification?",
					type:"GET",
					data:{
						email:this.email
					},
					dataType:"json",
					success:function(data){
						if(data.code=="200")
							this.checkText=data.checkText;
						else if(data.code=="400")
							getCode();
					}
				})
			},
			set:function(){
				$.ajax({
					url:"http://27x31799n7.zicp.vip/changePassword?"
				})
			}
			
		}
	})
	
</script>
</body>

</html>